<template>
  <el-dialog v-model="showDetail" :title="knowledge.name || '课件预览'" width="1200" @close="beforeClose"
    :destroy-on-close="true" fullscreen>
    <el-row>
      <el-col :span="18">
        <iframe v-if="knowledge.type == 'doc'" :src="url1 + knowledge.attach.id" class="wraps"></iframe>
        <div v-else>
          <video ref="myVideo" class="video-js" controls preload="auto" data-setup="{}">
            <source :src="url + knowledge.attach.id + '&videoFile=true'" type="video/mp4" />
          </video>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="flex">
          <el-button class="flex1 mb10" v-if="hasPer" @click="downloadFile" type="primary">
            下载
          </el-button>
        </div>
        <div class="p10" v-if="studyTimes" :class="'已达到课件时长，可以学习其他课件啦！' == studyTimes ? 'red' : ''">
          已学时长：{{ studyTimes }}
        </div>
        <div class="p10" v-if="requireTimes">课件时长：{{ requireTimes }}</div>

        <div class="p10">密级：{{ knowledge.securityName }}</div>
        <div class="p10">简介：{{ knowledge.note }}</div>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import 'video.js/dist/video-js.css';
import videojs from 'video.js';
import { buttonPermission } from '@/api/position/courseware';
import { formatTimeToLocal } from '@/utils/util';

export default {
  created() {
    console.log('this.baseHost',this.baseHost);
  },
  data() {
    return {
      url: this.baseHost + '/blade-resource/oss/endpoint/download-file?attachId=',
      url1: this.baseHost + '/blade-resource/oss/endpoint/viewFile/pdf/',
      hasPer: false,
      player: null,
      html: '',
      showDetail: false,
      knowledge: {},
      studyTimes: '',
      requireTimes: '',
      times: 0,
      isShow: true,
    };
  },
  methods: {
    // 视频播放器初始化
    initPlayer() {
      this.videoType = this.knowledge.attach.extension;
      setTimeout(() => {
        if (this.$refs.myVideo) {
          this.player = videojs(this.$refs.myVideo, {
            playbackRates: [1, 1.25, 1.5],
            path: this.url + this.knowledge.id + '&videoFile=true',
          });
          this.player.on('ratechange', () => {
            this.$emit('ratechange', this.player.playbackRate());
          });
          this.player.on('play', () => {
            this.isShow = true;
          });
          this.player.on('playing', () => {
            this.isShow = true;
          });
          this.player.on('pause', () => {
            this.isShow = false;
          });
          this.player.on('waiting', () => {
            this.isShow = false;
          });
          this.player.on('ended', () => {
            this.isShow = false;
          });
        } else {
          this.initPlayer();
        }
      }, 1000);
    },
    // 是否有权限下载
    getPermission() {
      buttonPermission().then(res => {
        this.hasPer = res.data.data;
      });
    },
    // 下载文件
    async downloadFile() {
      window.open(
        `${this.url}${this.knowledge.attach.id}${this.knowledge.type == 'doc' ? '' : '&encrypt=false'}`
      )
    },
    startStudy(studyTimes = 0, requireTime = 0) {
      let times = Number(studyTimes) || 0;
      this.timer = setInterval(() => {
        if (!this.isShow) {
          return;
        }
        times++;
        if (times > requireTime) {
          this.studyTimes = '已达到课件时长，可以学习其他课件啦！';
          clearInterval(this.timer);
          this.timer = null;
          this.isShow = false;
          return;
        }
        this.studyTimes = formatTimeToLocal(times);
      }, 1000);
    },
    initEvent() {
      window.addEventListener('focus', () => {
        this.isShow = true;
      });
      window.addEventListener('blur', () => {
        this.isShow = false;
      });
    },
    async open(data) {
      this.initEvent();
      this.isShow = true;
      this.showDetail = true;
      this.knowledge = data;
      this.studyTimes = 0;
      if (typeof data.studyTime == 'number') {
        this.startStudy(data.studyTime, data.requireTime);
      }
      this.requireTimes = formatTimeToLocal(data.requireTime);
      this.getPermission();
      switch (this.knowledge.type) {
        case 'video':
          this.initPlayer();
          break;
      }
    },
    beforeClose() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
      this.showDetail = false;
      // this.$emit('close');
    },
  },
};
</script>

<style lang="scss" scoped>
.video-js {
  width: 100%;
  height: calc(100vh - 130px);
  border: 0;
  overflow: auto;
}

.wraps {
  width: 100%;
  height: calc(100vh - 130px);
  overflow: auto;
}

.iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.red {
  color: red;
}
</style>
